<!-- 文章详情 -->
<template>
	<view class="page">
		<view class="article">
			<view class="title">
				{{articleDetail.title}}
			</view>
			<view class="user flex align-center">
				<view class="name">
					{{articleDetail.articleUserName}}
				</view>
				<!-- <view class="vipimg">
					<image :src="articleDetail.vipimg" mode=""></image>
				</view> -->
				<view class="datetime">
					{{getTimer(articleDetail.createDate)}}
				</view>
			</view>
			<view class="article_image" v-if="articleDetail.image.length > 0">
				<image :src="articleDetail.image" mode="widthFix"></image>
			</view>
			<view class="counts">
				{{articleDetail.content}}
			</view>
			<view class="numbers flex justify-between align-center">
				<view class="left flex">
					<view class="icon flex align-center">
						<view class="img">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/pinlun.png" mode="">
							</image>
						</view>
						<view class="text">
							{{articleDetail.commentNum}}
						</view>
					</view>
					<view class="icon flex align-center">
						<view v-if="!articleDetail.collectType" class="img" @click="collect(articleDetail.articleListId)">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/cang.png" mode="">
							</image>
						</view>
						<view v-if="articleDetail.collectType" class="img" @click
						="collect(articleDetail.articleListId)">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/cang-active.png" mode="">
							</image>
						</view>
						<view class="text">
							{{articleDetail.collectNum}}
						</view>
					</view>
					<view class="icon flex align-center">
						<view v-if="!articleDetail.likeType" class="img" @click="like(articleDetail.articleListId)">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/zan.png" mode=""></image>
						</view>
						<view v-if="articleDetail.likeType" class="img" @click="like(articleDetail.articleListId)">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/zan-active.png" mode=""></image>
						</view>
						<view class="text">
							{{articleDetail.likeNum}}
						</view>
					</view>
				</view>
				<view class="right flex">
					阅读 {{articleDetail.reading}}
				</view>
			</view>
		</view>
		<view style="width: 750rpx;
height: 20rpx;
background: #F7F7F7;">

		</view>
		<view class="comments">
			<view class="count">
				{{articleDetail.commentNum}}条评论
			</view>
			<view class="list">
				<ArticleComments  @changeshowe="change" @likean="likean" :it="it" v-for="it in articleDetail.getArticleComments.records" :key="articleDetail.articleCommentId"></ArticleComments>
			</view>
		</view>
		<Evaluation :status="1" v-if="!showe" @shuaxin="getList"></Evaluation>
		<Evaluations :status="1" v-if="showe" @changeshowe="change2"></Evaluations>
	</view>
</template>

<script>
	import TreeHole from '@/components/treeHole/treeHole.vue'
	import ArticleComments from '@/components/articleComments/aritileComments.vue'
	import Evaluation from '@/components/evaluation/evaluation.vue'
	import Evaluations from '@/components/evaluation/evaluations.vue'
	export default {
		components: {
			ArticleComments,
			Evaluation,
			Evaluations
		},
		data() {
			return {
				item: {},
				list: [],
				articleDetail: {},
				articleQurey: {
					id: 0
				},
				showe:false,
				collctPost:{
					articleListId: Number
				},
				likePost:{
					articleListId: Number
				},
				articleDetail:{}
			}
		},
		onLoad() {
			this.articleQurey.id = uni.getStorageSync('pageNum')
			this.reading()
			this.getList()
			
			// list.forEach(item => {
			// 	item.isan = false
			// })
			// this.list = list
		},
		methods: {
			getTimer(timer) {
			  
			  let nowe = new Date();  // 当前的系统时间
			  let oldtime = new Date(timer);   //目标时间
			  let t_day = oldtime.getDate();
			  let t_year = oldtime.getFullYear();
			  let t_month = oldtime.getMonth() + 1;
			  let t_hour = oldtime.getHours();
			  let t_minute = oldtime.getMinutes();
			  if (t_hour<10){
			    t_hour = '0' + t_hour
			  }
			  if (t_minute < 10) {
			    t_minute = '0' + t_minute
			  }
			  let n_year = nowe.getFullYear();
			  let n_month = nowe.getMonth() + 1;
			  let n_day = nowe.getDate();
			  let mistiming = nowe - oldtime; // 计算出当前时间，与目标时间的时间差
			  if (t_year == n_year) {
			    if (n_month == t_month) {
			      //  在同一月  
			      if (n_day - t_day == 1) {
			        // 差等于1 昨天 + 时分
					
			        return '昨天' + ' ' + t_hour + ':' + t_minute
			      } else if (n_day - t_day == 0) {
			        // 显示 时分
					
			        return t_hour + ':' + t_minute
			      } else {
					
			        return t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
			      }
			    }else {
					console.log(t_month + '.' + t_day)
					return t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
				}
			  } else {
			    //跨年了  显示 年 月 日 
				console.log(t_year + '.' + t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute)
			    return t_year + '年' + t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
			  }
			},
			//点击展示更多
			likean(id) {
				this.list.forEach(item => {
					if (item.id == id) {
						item.isan = true
					}
				})
			},
			//阅读量
			async reading(){
				let id = uni.getStorageSync('pageNum')
				let qurey = {
					'id': id
				}
				let {code,data} = await this.$post('/articleList/articleDetailReading',qurey)
				if(code == 200){
					console.log(data)
				}
			},
			//收藏
			async collect(id) {
				if(this.$login()){
					this.collctPost.articleListId = id
				await this.$post('/articleList/articleCollection',this.collctPost)
				await this.fresh()
				uni.setStorageSync('likeId1',id)
				}else{
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}
				
			},
			//点赞
			async like(id) {
				if(this.$login()){
					this.likePost.articleListId = id
				await this.$post('/articleList/likeTheArticle',this.likePost)
				await this.fresh()
				uni.setStorageSync('likeId1',id)
				}else{
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}
				
			},
			//请求详情
			async getList() {
				let {
					data: article
				} = await this.$get('/articleList/detail',this.articleQurey)
				console.log(article)
				this.articleDetail = article
			},
			//刷新页面
			fresh() {
				if (getCurrentPages().length != 0) {
				  //刷新当前页面的数据
				  getCurrentPages()[getCurrentPages().length - 1].onLoad()
				}
			},
			change(e){
				this.showe = e
				console.log(this.showe)
			},
			change2(e){
				this.showe = e
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: calc(75rpx + env(safe-area-inset-bottom));

		.article {
			padding: 30rpx;

			.title {
				font-weight: bold;
				color: #333333;
				font-size: 38rpx;
				margin-bottom: 33rpx;
			}

			.user {
				.name {
					font-weight: 500;
					color: #666666;
					font-size: 23rpx;
					margin-right: 10rpx;
				}

				.vipimg {
					width: 31rpx;
					height: 34rpx;
					margin-right: 30rpx;
				}

				.datetime {
					font-weight: 500;
					color: #666666;
					font-size: 23rpx;
				}
			}
			.article_image{
				width: 100%;
				margin-top: 20rpx;
			}
			.counts {
				margin-top: 30rpx;
				word-wrap: break-word;	
			}

			.numbers {
				margin-top: 30rpx;

				.left {
					.icon {
						margin-right: 30rpx;
						.img {
							width: 32rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

						.text {
							font-weight: 500;
							color: #666666;
							font-size: 23rpx;
							line-height: 1;
						}
					}
				}

				.right {
					font-weight: 500;
					color: #666666;
					font-size: 23rpx;
				}
			}
		}

		.comments {
			padding: 30rpx;

			.count {
				font-weight: bold;
				color: #333333;
				font-size: 28rpx;
			}

			.list {}
		}
	}
</style>
